import { Canvas, Chart, Interval, Legend } from "@antv/f2";
import { BOX4_NAME } from "../../constants/index";
import styles from "./boxs.css";
import { useEffect } from "react";

export function Box4({ hasTitle = true }) {
  const family_doctor = [
    { reg_name: "沧州市", num: 130, ratio: 1 },
    { reg_name: "沧县", num: 56, ratio: 1 },
    { reg_name: "青县", num: 20, ratio: 1 },
    { reg_name: "东光县", num: 16, ratio: 1 },
    { reg_name: "肃宁县", num: 6, ratio: 1 },
    { reg_name: "盐山县", num: 4, ratio: 1 },
  ];
  useEffect(() => {
    const context = document.getElementById("Box4")?.getContext("2d");
    if (!context) return
    const { offsetHeight, offsetWidth } = context.canvas;
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart
          data={family_doctor}
          coord={{
            type: "polar",
            transposed: true,
            innerRadius: 0.7,
          }}
        >
          <group
            style={{
              x: offsetWidth / 2 - 32,
              y: offsetHeight / 2 - 6,
            }}
          >
            <text
              style={{
                textAlign: "center",
                fill: "#deffff",
                text: "总人数:",
                fontSize: 8,
              }}
            />
            <text
              style={{
                textAlign: "center",
                y: "30px",
                fill: "#deffff",
                text: "232人",
                fontSize: 8,
              }}
            />
          </group>

          <Interval
            x="ratio"
            y="num"
            adjust="stack"
            color={{
              field: "reg_name",
              range: [
                "#1890FF",
                "#13C2C2",
                "#2FC25B",
                "#FACC14",
                "#F04864",
                "#8543E0",
              ],
            }}
            style={{
              radius: [10, 7, 4, 2],
            }}
          />
          <Legend
            position="right"
            itemStyle={{
              height: 14,
            }}
          />
        </Chart>
      </Canvas>
    );
    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX4_NAME}</div>}
      <canvas className={styles.main} id="Box4"></canvas>
    </div>
  );
}
export function Box42({ hasTitle = true }) {
  const family_doctor = [
    { reg_name: "沧州市", num: 130, ratio: 1 },
    { reg_name: "沧县", num: 56, ratio: 1 },
    { reg_name: "青县", num: 20, ratio: 1 },
    { reg_name: "东光县", num: 16, ratio: 1 },
    { reg_name: "肃宁县", num: 6, ratio: 1 },
    { reg_name: "盐山县", num: 4, ratio: 1 },
  ];
  useEffect(() => {
    const context = document.getElementById("Box42")?.getContext("2d");
    if (!context) return
    const { offsetHeight, offsetWidth } = context.canvas;
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart
          data={family_doctor}
          coord={{
            type: "polar",
            transposed: true,
            innerRadius: 0.7,
          }}
        >
          <group
            style={{
              x: offsetWidth / 2 - 32,
              y: offsetHeight / 2 - 6,
            }}
          >
            <text
              style={{
                textAlign: "center",
                fill: "#deffff",
                text: "总人数:",
                fontSize: 8,
              }}
            />
            <text
              style={{
                textAlign: "center",
                y: "30px",
                fill: "#deffff",
                text: "232人",
                fontSize: 8,
              }}
            />
          </group>

          <Interval
            x="ratio"
            y="num"
            adjust="stack"
            color={{
              field: "reg_name",
              range: [
                "#1890FF",
                "#13C2C2",
                "#2FC25B",
                "#FACC14",
                "#F04864",
                "#8543E0",
              ],
            }}
            style={{
              radius: [10, 7, 4, 2],
            }}
          />
          <Legend
            position="right"
            itemStyle={{
              height: 14,
            }}
          />
        </Chart>
      </Canvas>
    );
    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX4_NAME}</div>}
      <canvas className={styles.main} id="Box42"></canvas>
    </div>
  );
}
export function Box43({ hasTitle = true }) {
  const family_doctor = [
    { reg_name: "沧州市", num: 130, ratio: 1 },
    { reg_name: "沧县", num: 56, ratio: 1 },
    { reg_name: "青县", num: 20, ratio: 1 },
    { reg_name: "东光县", num: 16, ratio: 1 },
    { reg_name: "肃宁县", num: 6, ratio: 1 },
    { reg_name: "盐山县", num: 4, ratio: 1 },
  ];
  useEffect(() => {
    const context = document.getElementById("Box43")?.getContext("2d");
    if (!context) return
    const { offsetHeight, offsetWidth } = context.canvas;
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart
          data={family_doctor}
          coord={{
            type: "polar",
            transposed: true,
            innerRadius: 0.7,
          }}
        >
          <group
            style={{
              x: offsetWidth / 2 - 32,
              y: offsetHeight / 2 - 6,
            }}
          >
            <text
              style={{
                textAlign: "center",
                fill: "#deffff",
                text: "总人数:",
                fontSize: 8,
              }}
            />
            <text
              style={{
                textAlign: "center",
                y: "30px",
                fill: "#deffff",
                text: "232人",
                fontSize: 8,
              }}
            />
          </group>

          <Interval
            x="ratio"
            y="num"
            adjust="stack"
            color={{
              field: "reg_name",
              range: [
                "#1890FF",
                "#13C2C2",
                "#2FC25B",
                "#FACC14",
                "#F04864",
                "#8543E0",
              ],
            }}
            style={{
              radius: [10, 7, 4, 2],
            }}
          />
          <Legend
            position="right"
            itemStyle={{
              height: 14,
            }}
          />
        </Chart>
      </Canvas>
    );
    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX4_NAME}</div>}
      <canvas className={styles.main} id="Box43"></canvas>
    </div>
  );
}
